<template>
	<Container>
		<view class="header">
			<view class="role"><image :class="{ articleLight: isStart }" :src="assignment.comparedArticle.imageUrl" mode="aspectFit"></image></view>
			<view class="articles">
				<view
					hover-class="touch"
					hover-stay-time="300"
					:class="{ error: chooses[index] === 'error' }"
					@tap="tap(item, index)"
					v-for="(item, index) in assignment.optionArticles"
					:key="index"
				>
					<image class="image" :src="item.imageUrl" mode="aspectFit"></image>
					<SuccessIcon :right="20" :bottom="20" v-if="chooses[index] === 'select'" />
				</view>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="assignment.questionName" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import SuccessIcon from '../successIcon.vue'
export default {
	mixins: [mixins],
	components: { AudioIcon, Question, Container, SuccessIcon },
	data() {
		return {
			isStart: false
		}
	},
	watch: {
		questionPress: function(bool) {
			if (!bool) {
				this.parseTextAudio({
					text: this.assignment.comparedArticle.dialogue,
					speaker: this.assignment.comparedArticle.speaker
				}).then(res => {
					setTimeout(() => {
						this.dialogueAudio({
							src: res,
							start: () => {
								this.isStart = true
							},
							end: () => {
								this.isStart = false
							}
						})
					}, 500)
				})
			} else {
				this.isStart = false
			}
		}
	},
	methods: {
		tap: function(item, index) {
			this.touchAudio()
			if (this.isComplete) return
			if (this.questionPress || this.isStart) return
			if (this.chooses[index] === 'select') {
				this.optionStatus('', index)
			} else {
				this.optionStatus('select', index)
				if (this.choosesKey.indexOf(item.name) < 0) this.choosesKey.push(item.name)
			}
			if (this.choosesKey.length === 3) {
				const bool = this.choosesKey.join('') === this.assignment.answerTexts.join('')
				this.$parent.next({
					isSure: bool
				})
				if (!bool) {
					this.choosesKey = this.choosesKey.map((item,index) => {
						this.optionStatus('error', index)
					})
				}
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 65vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	display flex
	position relative
	.role, .articles
		width 50%
		height 100%
		display flex
		align-items center
		justify-content center
		flex-direction column
		view
			width 100%
			height 30%
			display flex
			align-items center
			justify-content center
			position relative
			transition all 0.3s
			.image
				width 75%
				height 75%
	.role image
		width 90%
		height 90%
</style>
